<html>
    <head>
        <meta charset="UTF-8">
        <title>练习：拖拽</title>
        <style type = "text/css">
            #box1
            {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }

            #box2
            {
                width: 100px;
                height: 100px;
                background-color: green;
                position: absolute;

                left: 200px;
                top: 200px;
            }
        </style>
        <script type="text/javascript">
            event = event || window.event;

            window.onload = function()
            {
                var box1 = document.getElementById("box1");
                box1.onmousedown = function(event)
                {
                    //求出div和鼠标之间的偏移量
                    var ol = event.clientX - box1.offsetLeft;
                    var ot = event.clientY - box1.offsetTop;

                    document.onmousemove = function(event)
                    {

                        var left = event.clientX - ol;
                        var top = event.clientY - ot;

                        box1.style.left = left + "px";
                        box1.style.top = top + "px";
                    }

                    

                    document.onmouseup = function()
                    {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }

                    /*
                        当我们拖拽页面中的网页的时候，浏览器会默认搜索选中的内容
                        这是浏览器的默认行为
                        如果不希望存在这样的行为，则可以通过return false来取消默认行为
                    */

                    return false;
                }
            }
        </script>
    </head>

    <body>
        我是一段文字
        <div id = "box1"></div>

        <div id = "box2"></div>
    </body>
</html>